<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作和CSS方法-4.jQuery在CSS方法应用</title>
    <script src="./jquery1.11.3.js"></script>
    <style>
        .box{
            color: red;
        }
        .bg{
            background-color: #99ff99;
        }
        .box1{
            color: blue;
        }
    </style>
    <script>
        $(function () {
            // $('div').addClass('box');//为某个元素添加class类 第一种方法
            // document.getElementsByTagName("div")[0].className+="box";//为某个元素添加class类 第二种方法
          // document.getElementsByTagName("div")[0].setAttribute('class','box');//某个元素添加class类 第三种方法

            // $('div').addClass('box bg');//为某一元素添加多个class属性
            // $('div').removeClass('box');//删除某一元素一个类的属性值

            $('div').click(function () {
                // $('div').addClass('box1');
                // $('div').toggleClass('box');//切换class属性值

                //在默认属性值和指定属性值之间转换
                if ($('div').hasClass('box1')){
                    $('div').removeClass('box1').addClass('box');
                }else if ($('div').hasClass('box')){
                    $('div').removeClass('box').addClass('box1');
                }
            });
            //需求 想在class为box 和box之前切换颜色

        });
    </script>
</head>
<body>
<script>
/*DOM操作和CSS方法
*
*    一.应用jQuery设置元素及内容
*                       jquery                                 JS
*
*  1.获取html内容        $('#box').html()                       document.getElementById("box").innerHTML
*  2.修改html内容        $('#box').html('<em>新的内容</em>')    document.getElementById("box").innerHTML="文本内容";
*
*  3.获取html文本内容    $('#box').text()                       document.getElementById("box").innerText
*  4.获取strong文本内容  $('strong').eq(0).text()               document.getElementsByTagName("strong")[0].innerText
*
*  5.获得表单的内容      $('input').eq(0).val()                 document.getElementsByTagName("input")[0].value
*  6.修改表单的内容      $('input').val('修改后的新表单内容')    document.getElementsByTagName("input")[0].value="新内容"
*  7.设置默认选中        $('input').val(['男','小孩'])          document.getElementById("男").checked=true;
*                                                             document.getElementById("小孩").checked=true;
*
* 二.应用jQuery操作元素的属性
*
* 1.获取某个元素的属性值   $('div').attr('id')
*    修改...............   $('div').attr('title','我是title')
* 2.设置 某个元素多个属性的属性值
*        $('div').attr({'title':'我是title','class':'cla','date':'2020'})
* 3.如何通过匿名fn来设置某个元素属性值？
*    $('div').attr('title',function (index,value) {
*    return '我是用fun设置的title'+index+value;//value获得之前值  这是添加属性值
*   });
* 4.如何删除元素指定的属性?
*   $('div').removeAttr('title')
* 三.应用jQuery操作元素的样式
*  1.获取某个元素的颜色    jquery中  $('div').css('color')
*                       js中      document.getElementById("box").style.color
*  2.修改某个元素的样式    jquery中  $('div').css('color','green')
*                       js中      document.getElementById("box").style.color="yellow"
*  3.获取某个元素的多个属性  jquery中   var box= $('div').css(['color','width','height']);
*                                   $.each(box,function (attr,value) {
*                                      alert(attr+":"+value);//遍历数组 遍历某一个元素的多个属性
*                                    });
*                        在js中  var box= document.getElementById("box").style;
*                                  for (var i in box){
*                                      console.log(i+":"+box[i]);//box[width]
*                                  }
*  4.设置某个元素的多个属性   jquery中   第一种方法:
*                                    $('div').css('height','20px').css('width','300px').css('background-color','red');
*                                    第二种方法:
*                                    $('div').css({//第一种方法 设置某个元素的多个属性
*                                          'height':'20px',
*                                          'width':'100px',
*                                           'background-color':'red'
*                                           });
*  5.获取多个相同元素        jquery中  $('div').each(function (index,element) {
*                                      alert(index+":"+element)
*                                      });
*                         js中     var divArr= document.getElementsByTagName("div");
*                                 for (var i=0;i<divArr.length;i++){
*                                     console.log(i+";"+divArr[i]);
*                                  }
*  6.获得以前的属性value值然后在基础上进行计算
*                     jquery中  $('div').css('width',function (index,value)
*                                   return parseInt(value)+200+"px";
*                                  });
##############################################################################
*  1.添加一个类      $('div').addClass('box')
*  2.删除一个类       $('div').removeClass('box')
*  3.切换class属性值  $('div').toggleClass('box')
*  4.点击事件  $('div').click(function (){.....}
*  5.在默认class属性值和指定属性值之间转换，比如颜色
*    if ($('div').hasClass('box1')){
*           $('div').removeClass('box1').addClass('box');
*    }else if ($('div').hasClass('box')){
*            $('div').removeClass('box').addClass('box1');
*   }

* 四.jQuery在CSS方法应用
*/
</script>
<script>
    /*
        1.添加一个类      $('div').addClass('box')
        2.删除一个类       $('div').removeClass('box')
        3.切换class属性值  $('div').toggleClass('box')
        4.点击事件  $('div').click(function (){.....}
        5.在默认class属性值和指定属性值之间转换，比如颜色
             if ($('div').hasClass('box1')){
                    $('div').removeClass('box1').addClass('box');
             }else if ($('div').hasClass('box')){
                     $('div').removeClass('box').addClass('box1');
            }


    * */
</script>
    <div class="box1" >
        <strong>css样式</strong>
    </div>
</body>
</html>